前言

本系列將介紹 Rails with Vue 的基本概念，並且以一個簡單的專案 Todo 來說明如何使用 Rails with Vue。我將透過這一系列的文章記錄我學習的過程，並且將我所學到的知識分享給大家。

• 【Day 01】淺入淺出 Rails with Vue - Before We Begin
• 【Day 02】淺入淺出 Rails with Vue - Vue 的基本概念 - 1
• 【Day 03】淺入淺出 Rails with Vue - Vue 的基本概念 - 2
• 【Day 04】淺入淺出 Rails with Vue - Vue 的基本概念 - 3
• 【Day 05】淺入淺出 Rails with Vue - Vue 的基本概念 - 4
• 【Day 06】淺入淺出 Rails with Vue - Vue 的基本概念 - 5
• 【Day 07】淺入淺出 Rails with Vue - Vue 的基本概念 - 6
• 【Day 08】淺入淺出 Rails with Vue - Vue 的基本概念 - 7
• 【Day 09】淺入淺出 Rails with Vue - Vue 的基本概念 - 8
• 【Day 10】淺入淺出 Rails with Vue - Vue 的基本概念 - 9
• 【Day 11】淺入淺出 Rails with Vue - Vue 的基本概念 - 10
• 【Day 12】淺入淺出 Rails with Vue - Vue 的基本概念 - 11
• 【Day 13】淺入淺出 Rails with Vue - Vue 的基本概念 - 12
• 【Day 14】淺入淺出 Rails with Vue - Vue 的基本概念 - 13
• 【Day 15】淺入淺出 Rails with Vue - Vue 的基本概念 - 14
• 【Day 16】淺入淺出 Rails with Vue - Vue 的基本概念 - 15
• 【Day 17】淺入淺出 Rails with Vue - Vue 的基本概念 - 16
• 【Day 18】淺入淺出 Rails with Vue - Vue 的基本概念 - 17
• 【Day 19】淺入淺出 Rails with Vue - Vue 的基本概念 - 18
• 【Day 20】淺入淺出 Rails with Vue - Vue 的基本概念 - 19
• 【Day 21】淺入淺出 Rails with Vue - Vue 的基本概念 - 20
• 【Day 22】淺入淺出 Rails with Vue - Vue 的基本概念 - 21
• 【Day 23】淺入淺出 Rails with Vue - Vue 的基本概念 - 22
• 【Day 24】淺入淺出 Rails with Vue - Vue 的基本概念 - 23
• 【Day 25】淺入淺出 Rails with Vue - Vue 的基本概念 - 24

Props

Passing Static or Dynamic Props

到目前為止我們傳到 props 的值都是屬於 static 的，也就是說我們在宣告 props 的時候就已經給定了值，如下所示：

<blog-post title="My journey with Vue"></blog-post>

但是有時候我們需要傳入一個動態的值，這時候我們就需要用到 v-bind 這個指令。

<!-- Dynamically assign the value of a variable -->
<blog-post v-bind:title="post.title"></blog-post>

<!-- Dynamically assign the value of a complex expression -->
<blog-post
  v-bind:title="post.title + ' by ' + post.author.name"
></blog-post>

以上我們都是傳入 String 的 type，但是其實傳入 any type 的值都是可以的，以下我們將分別介紹不同 type 的傳入方式。

Passing a Number

如以下範例中傳入的是一個 Number，在先前的章節有提到，可以針對 props 設定 type，養成好習慣，你真的不簡單，這樣在開發時就可以避免一些不必要的錯誤。
這時候我們就需要在宣告 props 的時候指定 type 為 Number。

<!-- Even though `42` is static, we need v-bind to tell Vue that -->
<!-- this is a JavaScript expression rather than a string.       -->
<blog-post v-bind:likes="42"></blog-post>

<!-- Dynamically assign to the value of a variable. -->
<blog-post v-bind:likes="post.likes"></blog-post>

blogPost = {
  // camelCase in JavaScript
  props: {
    title: String,
    likes: Number,
  },
  template: "<h3>Title is {{ title }}, Likes count is {{likes}}</h3>",
};

Passing a Boolean

如以下範例中傳入的是一個 Boolean，再一次養成好習慣，你真的不簡單起來，設定 type 為 Boolean。

<!-- Including the prop with no value will imply `true`. -->
<blog-post is-published></blog-post>

<!-- Even though `false` is static, we need v-bind to tell Vue that -->
<!-- this is a JavaScript expression rather than a string.          -->
<blog-post v-bind:is-published="false"></blog-post>

<!-- Dynamically assign to the value of a variable. -->
<blog-post v-bind:is-published="post.isPublished"></blog-post>

blogPost = {
  // camelCase in JavaScript
  props: {
    title: String,
    likes: Number,
    isPublished: Boolean,
  },
  template:
    "<h3>Title is {{ title }}, Likes count is {{likes}}, isPublished is {{isPublished}}</h3>",
};

Passing an Array

如以下範例中傳入的是一個 Array，再一次養成好習慣，你真的不簡單起來，設定 type 為 Array。

<!-- Even though the array is static, we need v-bind to tell Vue that -->
<!-- this is a JavaScript expression rather than a string.            -->
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>

<!-- Dynamically assign to the value of a variable. -->
<blog-post v-bind:comment-ids="post.commentIds"></blog-post>

blogPost = {
  // camelCase in JavaScript
  props: {
    title: String,
    likes: Number,
    isPublished: Boolean,
    commentIds: Array,
  },
  template:
    "<h3>Title is {{ title }}, Likes count is {{likes}}, isPublished is {{isPublished}}, commentIds: {{commentIds}}</h3>",
};

Passing an Object

如以下範例中傳入的是一個 Object，再一次養成好習慣，你真的不簡單起來，設定 type 為 Object。
但這次跟之前不一樣的是，當我們傳入的是 Object 時，v-bind 後面不需要加上 : (v-bind instead of v-bind:prop-name)。
假設我們想要傳入一個 post object 如下：

post: {
  id: 1,
  title: 'My Journey with Vue'
}

在 DOM 中我們可以這樣寫：

<blog-post v-bind="post"></blog-post>

上面的寫法其實就等於，直接成為程式碼節省王

<blog-post
  v-bind:title="post.title + ' by ' + post.author.name"
  v-bind:likes="post.likes"
  v-bind:is-published="post.isPublished"
  v-bind:comment-ids="post.commentIds"
></blog-post>

Reference

• https://v2.vuejs.org/v2/guide/components-props.html